<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"><head>
  <meta charset="utf-8">
  <title>Amusementpark-OS</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" type="text/css" th:href="@{/plugin/layui/css/layui.css}" />
	<link rel="stylesheet" th:href="@{/plugin/layui/css/modules/code.css}" media="all">
	<link rel="stylesheet" th:href="@{/plugin/layui/css/modules/layer/default/layer.css}" media="all">
	<script th:src="@{/plugin/vue/axios.js}" type="text/javascript" charset="utf-8"></script>
	<script th:src="@{/plugin/vue/vue.js}" type="text/javascript" charset="utf-8"></script>
	<script th:src="@{/plugin/jquery.min.js}" charset="utf-8"></script>

</head>
<body>
	<div id="app" class="layui-container" style="margin-top: 30px;">
		<!-- 读取腕带 -->
		<div class="layui-col-md8 layui-bg-gray" style="height: 200px;border:#40AFFE 2px solid ;">
			<!-- 读取腕带 -->
<!--			<form class="layui-form" action="" method="post" style="margin-top: 20px;">-->
				<!-- 腕带号 -->
				<div class="layui-form-item" style="margin-top: 30px">
					<label class="layui-form-label">腕带号</label>
					<div class="layui-input-inline">
						<input type="text" name="wriststrp_id" required lay-verify="required"
						v-model="wriststrp_id" value="" autocomplete="off" class="layui-input"/>
					</div>
					<label class="layui-form-label"></label>
					<div class="layui-input-inline">
						<button class="layui-btn" @click="getWdInfo(wriststrp_id)" lay-submit lay-filter="formDemo">读取腕带</button>
					</div>
				</div>
<!--			</form>-->
			<form>
				<!-- 支付方式 -->
				<div class="layui-form-item">
<!--					与vue结合，无法双向绑定-->
<!--				    <label class="layui-form-label">支付方式</label>-->
<!--				    <div class="layui-input-inline">-->
<!--				    	<select v-model="selectPay" lay-verify="required" lay-filter="test">-->
<!--				    		<option v-for="selectPay in selectsPay" :value="selectPay">{{selectPay}}</option>-->

<!--				    	</select>-->
<!--				    </div>-->
<!--					-->
<!--					<label class="layui-form-label">调整类型</label>-->
<!--					<div class="layui-input-inline">-->
<!--						<select v-model="select.adjustReason" lay-verify="required" >-->
<!--							<option v-for="select in listAdjustMoneyInfo" :value="select.adjustReason">{{select.adjustReason}}</option>-->

<!--						</select>-->
<!--					</div>				-->
				</div>
				
				<!-- 调整类型 -->
				<div class="layui-form-item">
				   
					<label class="layui-form-label">腕带类型</label>
					<div class="layui-input-inline">
						<input type="text" name="type_name" required lay-verify="required"
						 v-model="type_name" value="" autocomplete="off" class="layui-input" disabled/>
					</div>
					
					<label class="layui-form-label">可用余额</label>
					<div class="layui-input-inline">
						<input type="text" name="name" required lay-verify="required" 
						 v-model="balance"  value="" autocomplete="off" class="layui-input" disabled/>
					</div>	
					
				</div>
				
			</form>
		</div>
		
		<!-- 金额调整 -->
		<div class="layui-col-md4 layui-bg-gray" style="height: 200px;border:#40AFFE 2px solid;">
<!--			<form class="layui-form" th:action="@{/userAdjustMoneyInfo/insert}" method="POST" style="margin-top: 20px;">-->
				<div class="">
					<label class="layui-form-label" style="margin-top: 10px">自定义·金额</label>
					<div class="layui-input-inline" style="width: 150px;margin-top: 10px">
						<input type="text" name="adjustMoney" required lay-verify="required" v-model="adjustMoney"
						 value="" autocomplete="off" class="layui-input"/>
<!--						<input type="hidden" name="wdId" :value="a002">-->
<!--						<input type="hidden" name="wdUser" :value="4">-->
<!--						<input type="hidden" name="adjustType" v-model="select.adjustReason" value="">-->
<!--						<input type="hidden" name="adjustPayType" v-model="selectPay" value="">-->
<!--						paramsInsert.append("adjustType", this.select.adjustReason);-->
<!--						paramsInsert.append("adjustPayType", this.selectPay);-->
					</div>
				</div>
				
				<div class="" style="margin-top: 10px">
					<div class="layui-input-block">
						<button class="layui-btn" lay-submit lay-filter="formDemo" @click="customizeInfo">确认</button>
						<button class="layui-btn  layui-btn-danger" lay-submit lay-filter="formDemo" @click="resetInfo">重置</button>
					</div>
				</div>
<!--			</form>-->
			<div class="layui-col-md12 layui-bg-gray" style="padding-left: 110px;margin-top: 10px">
				<button onclick="window.location.href='/cashIncomingModule/listModule';" class="layui-btn layui-btn-danger" style="width: 140px" lay-submit lay-filter="formDemo">关闭</button>
			</div>

		</div>
		
	
		<!-- 项目明细-内容 -->
		<div class="layui-col-md8 layui-bg-gray" style="overflow-y:auto;height: 300px;border:#40AFFE 2px solid ;">
			<!-- 项目明细-标题-->
			<div class="layui-col-md12 layui-bg-blue" style="height: 30px;">
				<div style="margin-top: 5px;margin-left: 5px;">
					项目明细
				</div>
			</div>
			<table class="layui-table" lay-size="sm" style="">
			  <colgroup>
			    <col width="150">
			    <col width="200">
			    <col>
			  </colgroup>
			  <thead>
			    <tr>
			      <th>操作</th>
			      <th>序号</th>
			      <th>项目调整原因</th>
				  <th>金额</th>
			    </tr> 
			  </thead>
			  <tbody>
			    <tr v-for="item in listUserAdjustMoneyInfo">
			<!--<td> <button @click="deleteById(item.id)" class="layui-btn layui-btn-sm layui-btn-danger">删除</button></td>-->
			      <td>{{item.id}}</td>
			      <td>{{item.adjustType}}</td>
				  <td>{{item.adjustMoney}}</td>
			    </tr>
<!--				<tr>-->
<!--				  <td>删除</td>-->
<!--				  <td>2</td>-->
<!--				  <td>腕带损坏</td>-->
<!--				  <td>-20.00</td>-->
<!--				</tr>-->
<!--			    <tr>-->
<!--			      <td>删除</td>-->
<!--			      <td>3</td>-->
<!--			      <td>其他类型</td>-->
<!--			      <td>+10.00</td>-->
<!--			    </tr>-->
			  </tbody>
			</table>
		</div>
		<div class="layui-col-md4 layui-bg-gray" style="height: 300px;border:#40AFFE 2px solid ;">
			<!-- 项目调整原因和金额-标题-->
			<div class="layui-col-md12 layui-bg-blue" style="height: 30px;">
				<div style="margin-top: 5px;margin-left: 5px;">
					项目调整原因和金额
				</div>
			</div>
			<!-- 项目调整原因和金额-标题 -->
			<div v-for="item in listAdjustMoneyInfo" @click="getAdjustInfo(item.adjustId)" class="layui-col-md6 layui-bg-cyan" style="height: 50px;border:#40AFFE 2px solid ;">
				<div style="margin:15px 45px 10px">
					{{item.adjustReason}}
                    <!-- 消费项目-->
				</div>
			</div>
			
<!--			<div class="layui-col-md6 layui-bg-orange" style="height: 50px;border:#40AFFE 2px solid ;">-->
<!--				<div style="margin:15px 45px 10px">-->
<!--					自定义-->
<!--				</div>-->
<!--			</div>-->
<!--			<div class="layui-col-md6 layui-bg-orange" style="height: 50px;border:#40AFFE 2px solid ;">-->
<!--				<div style="margin:15px 45px 10px">-->
<!--					操作失误-->
<!--				</div>-->
<!--			</div>-->
<!--			<div class="layui-col-md6 layui-bg-cyan" style="height: 50px;border:#40AFFE 2px solid ;">-->
<!--				<div style="margin:15px 45px 10px">-->
<!--					腕带损坏-->
<!--				</div>-->
<!--			</div>-->
		</div>
	
		<!-- 页脚 -->
		<div class="layui-col-md12 layui-bg-red" style="height: 30px;">
			<!-- 营业时间 -->
			<div id="mytime" class="layui-col-md3" style="margin-top: 5px;margin-left: 10px;">
				<!--营业时间：2020-2-22-->
			</div>
			<!-- 操作用户 -->
			<div class="layui-col-md3" style="margin-top: 5px;">
				操作人员：张三
			</div>
			<!-- 当前时间 -->
			<div id="mytime2" class="layui-col-md5" style="margin-top: 5px;">
				<!--18:55:21-->
			</div>
		</div>

		</div>
	</div>
	<script th:src="@{/plugin/layui/layui.js}" charset="utf-8"></script>
	<script th:src="@{/plugin/layui/layui.all.js}" charset="utf-8"></script>
	<script>
		// 时间展示
		function showTime() {
			var	nowtime = new Date();
			var	year = nowtime.getFullYear();
			var	month = nowtime.getMonth() + 1;
			var	date = nowtime.getDate();
			$("#mytime").html(year + "年" + month + "月" + date +"日");
			$("#mytime2").html("营业时间：" +nowtime.toLocaleTimeString());
			$("#mytime3").val(year + "-" + month + "-" + date +" " +nowtime.toLocaleTimeString());

		};
		// jQuery加载执行时间展示
		$(function(){
			setInterval("showTime()", 1000);
		})
		var app = new Vue({
			el:"#app",
			data:{
				listAdjustMoneyInfo:[],
				listUserAdjustMoneyInfo:[],
				adjustMoney:0.00,
				wdUser:0,
				select:{
					adjustId: 0,
					adjustMoney: 0.00,
					adjustReason: "自定义金额",
					adjuster: 0,
					adjustTime: "",
					adjustOrganization: 0,
					adjustStatus: 0,
					statusInfo: {
						statusId: 0,
						statusAttr: ""
					},
				},
				selectPay:'',
				selectsPay:['支付宝','现金'],
				wriststrp_id:"",
				balance: 0.00,
				type_name: "",
				customer_name:"",
				tel:"",
				customerInfo:{}
			},
			mounted:function(){
				this.listAdjustInfo();
			},
			methods:{
				getWdInfo:function(str){
					var that = this;
					axios.get("[[@{/getCurrentMsg?wriststrp_id=}]]"+this.wriststrp_id)
							.then(s=>{
								that.wriststrap_id = s.data.wriststrap_id;
								that.balance = s.data.balance;
								that.type_name = s.data.type_name;
								that.customer_name = s.data.customer_name;
								that.tel = s.data.tel;
								this.getWdUserInfo(this.tel);
							})
				},
				getWdUserInfo:function(customerTel){
					var that = this;
					const param = new FormData();
					param.append("tel",customerTel)
					axios.post("[[@{/userAdjustMoneyInfo/getByCustomer}]]",param)
							.then(s=>{
								that.customerInfo = s.data.data[0];
								that.wdUser = s.data.data[0].customer_id;
							})
				},
				deleteById:function(id){
					var p = new FormData();
					var that = this;
					p.append("id",id);
					axios.post("[[@{/userAdjustMoneyInfo/delete}]]",p)
							.then(e=>{
								if(e.data.data){
									this.listwdIdAndwdUser();
								}
							})
				},

				test:function(){
					console.log(this.selectPay)
				},
				resetInfo:function(){
					var that = this;
					that.adjustMoney = 0.00;
				},
				customizeInfo:function() {
					var customEvent = new FormData();
					customEvent.append("wdId", this.wriststrp_id);
					customEvent.append("wdUser", this.wdUser);
					customEvent.append("adjustType", this.select['adjustReason']);
					customEvent.append("adjustPayType", this.selectPay);
					customEvent.append("adjustMoney", this.adjustMoney);
					axios.post("[[@{/userAdjustMoneyInfo/insert}]]", customEvent)
							.then(res => {
								//that.insertData = res.data.data;
								//that.wdUser = res.data.data.wdUser;
								//console.log(res.data.data.wdUser);
								//console.log(this.insertData.wdUser+"------");
								var that = this;
								var params = new FormData();
								params.append("wdId",this.wriststrp_id);
								params.append("wdUser",this.wdUser);
								axios.post("[[@{/userAdjustMoneyInfo/listBywdIdAndwdUser}]]", params)
										.then(r => {
											that.listUserAdjustMoneyInfo = r.data.data;
											that.balance = Number(that.balance)+Number(that.adjustMoney);
										});
							})
				},
				listAdjustInfo:function(){
					var that = this;
					axios.get("http://localhost:8080/adjustMoneyInfo/selectAll")
							.then(resp=>{
								that.listAdjustMoneyInfo = resp.data.data;
								setTimeout(function () {
									layui.form.render();//延迟重新渲染,解决:select框拿到vue数据，无回显问题
								},10);
							});
				},
				getAdjustInfo:function(id){
					// console.log(id);
					var that = this;
					axios.get("http://localhost:8080/adjustMoneyInfo/selectOne?id="+id)
							.then(resp=>{
								var t = this;
								that.adjustMoney = resp.data.data.adjustMoney;
								var paramsInsert = new FormData();
								paramsInsert.append("wdId",this.wriststrp_id);
								paramsInsert.append("wdUser",this.wdUser);
								paramsInsert.append("adjustType",resp.data.data.adjustReason);
								paramsInsert.append("adjustPayType","支付宝");
								paramsInsert.append("adjustMoney",this.adjustMoney);
								axios.post("http://localhost:8080/userAdjustMoneyInfo/insert",paramsInsert)
										.then(res=>{
											//that.insertData = res.data.data;
											//t.wdUser = res.data.data.wdUser;
											//console.log(res.data.data.wdUser);
											//console.log(this.insertData.wdUser+"------");
											var that = this;
											var params = new FormData();
											params.append("wdId",this.wriststrp_id);
											params.append("wdUser",this.wdUser);
											axios.post("http://localhost:8080/userAdjustMoneyInfo/listBywdIdAndwdUser",params)
													.then(re=>{
														that.listUserAdjustMoneyInfo = re.data.data;
														that.balance = Number(that.balance)+Number(that.adjustMoney);
													})
										})

							})
				}
				/// getAdjustInfo -> insert -> listwdIdAndwdUser
				// insert:function(){
				// 	var that = this;
				// 	var paramsInsert = new FormData();
				// 	paramsInsert.append("wdId","a002");
				// 	paramsInsert.append("wdUser",2);
				// 	paramsInsert.append("adjustType","腕带损坏");
				// 	paramsInsert.append("adjustPayType","支付宝");
				// 	paramsInsert.append("adjustMoney",this.adjustMoney);
				// 	axios.post("http://localhost:8080/userAdjustMoneyInfo/insert",paramsInsert)
				// 			.then(res=>{
				// 				that.insertData = res.data.data;
				// 				that.wdUser = res.data.data.wdUser;
				// 				console.log(this.wdUser);
				// 				//console.log(this.insertData.wdUser+"------");
				// 			})
				// },
				,listwdIdAndwdUser:function(){
					var that = this;
					var params = new FormData();
					params.append("wdId",this.wriststrp_id);
					params.append("wdUser",this.wdUser);
					axios.post("http://localhost:8080/userAdjustMoneyInfo/listBywdIdAndwdUser",params)
							.then(re=>{
								that.listUserAdjustMoneyInfo = re.data.data;
							})
				},

			}
		})
	</script>


</body>
</html>